<template>
    <div class="table-content">
        <el-table :data="tableData" height="100%">
            <el-table-column
                v-for="item in columns"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop"
                :width="item.width ? item.width : 'auto'"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="dowload(scope.row)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum + 1"
            :page-sizes="[10, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import ControlBar from '@/components/common/ControlBar.vue'
import {
    getCompressList,
    downloadCompressFile,
    getDeCompressList,
} from '@/api/modules/compression.js'
import * as Base64 from 'js-base64'

const tableData = ref([])
const pageNum = ref(0)
const pageSize = ref(10)
// const total = ref(0)
const props = defineProps(['columns', 'type'])
const getCompressData = async () => {
    const { data } = await getCompressList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    })
    tableData.value = data.data
    total.value = data.totalElements
}
const getDeCompressData = async () => {
    const { data } = await getDeCompressList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    })
    tableData.value = data.data
    total.value = data.totalElements
}
const handleSizeChange = (val) => {
    pageSize.value = val
    if (props.type == 'compress') {
        getCompressData()
    } else {
        getDeCompressData()
    }
}
const handleCurrentChange = (val) => {
    pageNum.value = val - 1
    if (props.type == 'compress') {
        getCompressData()
    } else {
        getDeCompressData()
    }
}

watch(
    () => props.type,
    (newVal) => {
        if (newVal == 'compress') {
            getCompressData()
        } else {
            getDeCompressData()
        }
    },
    { immediate: true },
)
const total = ref(0)
const dowload = async (row) => {
    const data = await downloadCompressFile({
        base64FilePath: Base64.encode(row.deskFile),
    })
    // 截取文件名
    const lastIndex = row.deskFile.lastIndexOf('\\')
    const filenameWithExtension = row.deskFile.slice(lastIndex + 1)
    // 下载
    const blob = new Blob([data], {
        type: 'application/octet-stream',
    })
    const url = window.URL.createObjectURL(blob) // 创建一个虚拟的 a 元素
    const link = document.createElement('a')
    link.href = url
    link.download = filenameWithExtension // 触发点击事件
    link.click() // 释放 URL 对象
    window.URL.revokeObjectURL(url)
}
onMounted(() => {})
defineExpose({
    getCompressData,
    getDeCompressData,
})
</script>

<style lang="scss" scoped>
.table-content {
    height: calc(100% - 132px);
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-table {
        flex: 1;
    }
    .el-pagination {
        margin: 10px;
    }
}
</style>
